<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      button {
        display: block;
        background-color: blue;
        color: #fff;
        width: 200px;
        height: 50px;
        font-size: 24px;
      }
      input {
        font-size: 24px;
        display: block;
        width: 300px;
        height: 80px;
      }
      input::placeholder {
        font-size: 20px;
      }
      li {
        margin-bottom: 50px;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>
        <input type="text" id="username" placeholder="请输入用户名：" />
      </li>
      <li>
        <input type="text" id="email" placeholder="请输入邮箱：" />
      </li>
      <li>
        <input type="text" id="tel" placeholder="请输入联系电话：" />
      </li>
      <li>
        <button id="btn">保存</button>
      </li>
    </ul>
  </body>
  <script>
    //   6.要求：1）点击保存按钮时，使用JS判断用户的联系电话是否为纯数字，如果用户输入有错误，使用alert()弹框警告
    //          2）判断用户名是否填写，如果空白，使用alert弹框警告
    btn.onclick = function () {
      let tel_number = parseInt(tel.value);
      // console.log(tel_number, typeof tel_number);
      // console.log(Number(tel.value), typeof Number(tel.value));
      // console.log(Number(tel.value) === NaN);
      // console.log(tel_number !== Number(tel.value));
      // console.log(tel.value.length != 11);

      if (!username.value.length) {
        alert("未填写用户名");
      }
      // Number(tel.value) === NaN   确保输入为纯数字
      //tel_number !== Number(tel.value)   确保输入输入不为小数
      //tel.value != 11  确保最后一位不是小数点，从而被上述两条条件忽略
      if (
        Number(tel.value) === NaN ||
        tel_number !== Number(tel.value) ||
        tel.value.length != 11
      ) {
        alert("联系电话输入错误！");
        tel.value = "";
      }
    };
  </script>
</html>
